<template>
	<view>
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="汽车保养" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="head-2">
		</view>
		<view class="content">
			<view>
				<map scale="14" longitude="113.56045049999999" latitude="34.814811999999996" :markers="markers"
					@callouttap="callouttap"></map>
			</view>
			<view class="title">
				<text>车百事汽车生活馆</text>
				<text>556m</text>
			</view>
			<view style="margin-top: 10rpx; display: flex; justify-content: space-between;">
				<view>
					<view style="display: flex; align-items: center;">
						<view>
							<u-rate count="5" :readonly='true' value='4' activeColor='#FFC100' gutter=1></u-rate>
						</view>
						<text style="margin-left: 10rpx; font-size: 26rpx;">4分</text>
					</view>
					<u-text text="营业时间:周一至周五 早上8:00-晚上22:00" size="10" line-height="22px"></u-text>
					<u-text text="位置:山阳区人民路与解放路交叉口" size="10" line-height="22px"></u-text>
				</view>
				<image style="width: 22vw;height: 17vw; border-radius: 6rpx;" src="@/static/images/ls/服务站.jpg">
				</image>
			</view>
			<view class="bottom">
				<view class="left-btn" @click="show = true">
					<u-icon label="联系门店" size="25" color="#fff" name="phone-fill" label-size="16" label-color="#fff"
						top="1px"></u-icon>
				</view>
				<view class="right-btn">
					<u-icon label="立即预约" size="25" color="#fff" name="clock" label-size="16" label-color="#fff"
						top="1px"></u-icon>
				</view>
			</view>
		</view>
		<u-action-sheet @select="show=false" :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true"
			:show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '13633990224'
					},
					{
						name: '复制'
					},
					{
						name: '取消拨号'
					}
				],
				show: false,
				longitude: '',
				latitude: '',
				markers: [{
					id: 1,
					width: 20,
					height: 30,
					longitude: 113.56045049999999,
					latitude: 34.814811999999996,
					iconPath: '/static/images/ls/椭圆 3 拷贝 2@3x.png',
					callout: {
						content: '附近门店',
						bgColor: '#FC6330',
						color: '#fff',
						fontSize: 14,
						textAlign: 'center',
						display: 'ALWAYS',
						borderRadius: 25,
						padding: 10,
					},
				}]
			}
		},
		onReady() {
			let that = this
			uni.getLocation({
				type: 'gps',
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					console.log('当前位置的经度：' + that.longitude);
					console.log('当前位置的纬度：' + that.latitude);
				},
				fail: function(err) {
					console.error('获取位置失败：', err);
				}
			});
		},
		methods: {
			callouttap() {
				uni.$u.route('/pages/ls/nearbyStores/nearbyStores');
			},
			returnButton() {
				uni.$u.route({
					url: ('/pages/index/index'),
					type: 'tab'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 85vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		margin: 0 auto;
		margin-bottom: 2vh;
		transform: translateY(12vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

		map {
			width: 100%;
			height: 55vh;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 2vh;
		}

		.title>text:nth-child(1) {
			font-size: 18px;
			font-weight: 600;
		}

		.title>text:nth-child(2) {
			font-size: 13px;
			color: #3183FB;
		}


	}

	.head-2 {
		position: absolute;
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;
		z-index: 0;
	}

	.head {
		position: fixed;
		background-color: #3183FB;
		width: 100%;
		height: 80px;
		overflow: auto;
		z-index: 3;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		margin-top: 3vh;

		.left-btn {
			width: 40vw;
			height: 6vh;
			background-image: url('@/static/images/ls/矩形 10 拷贝@3x.png');
			background-size: 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding: 4px 0px 0 5vw;
		}

		.right-btn {
			width: 40vw;
			height: 6vh;
			background-image: url('@/static/images/ls/矩形 10 拷贝 2@3x.png');
			background-size: 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding: 4px 0px 0 5vw;
		}
	}
</style>